<template>
    <div>
        {{ title }}
        <div>{{ test }}</div>
        <div>{{ count }}</div>
        <ElButton @click="handleClick" type="primary">呵呵</ElButton>
        <ElButton @click="handleBack" text>回去</ElButton>
    </div>
</template>

<script lang="ts">
import BaseView from '@/common/ui/BaseView';
import { Options, defineBaseComponent } from '@/decorators/connect/vue3';
import { ElButton } from 'element-plus';
import { PropType, SetupContext } from 'vue';
import { useRouter } from 'vue-router';

export type Props = {
    test?: string;
};

@Options<Props>({
    components: {
        ElButton,
    },
    emits: ['tap'],
    name: 'TestCompView',
    props: {
        test: String as PropType<string>,
    },
})
class TestCompView extends BaseView {
    title = 'TestCompView';
    ElButton!: typeof ElButton;
    count = this.$ref(1);
    router = useRouter();
    constructor(readonly props: Props, readonly ctx: SetupContext) {
        super();
    }

    $init(): void {
        console.log('TestCompView');
    }

    handleClick() {
        this.count.value += 1;
        console.log(this.props.test);
        this.ctx.emit('tap', {});
    }

    handleBack() {
        this.router.back();
    }
}

export default defineBaseComponent<TestCompView, Props>(TestCompView);
</script>
